<template>
  <div class="fns-page">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
    export default {
      props: {
        total: {
          type: Number,
          default: 0
        },
        pageSize: {
          type: Number,
          default: 10
        },
        pageSizes: {
          type: Array,
          default: () => {
            return [10, 20, 30, 50]
          }
        },
        currentPage: {
          type: Number,
          default: 1
        }
      },
      /*data() {
        return {
          pagination: {
            total: 0,
            currentPage: 1,
            size: 10,
            sizes: [10, 20, 30, 50]
          }
        }
      },*/
      created() {
      },
      computed: {
      },
      methods: {
        handleSizeChange(val) {
          this.$emit('_pageChange', val)
        },
        handleCurrentChange(val) {
          this.$emit('_pageChange', val, 'size')
        }
      }
    }
</script>

<style scoped>
	.fns-page {
		text-align: right;
		margin-top: 20px;
		font-size: 14px !important;
		display: block;
	}
</style>
